{% comment %}
<!--
  Copyright (C) 2008 ZHENG Zhong <heavyzheng nospam-at gmail D0T com>
  - http://heavyz.blogspot.com/
  - http://buggarden.blogspot.com/

  The restaurant's map section (using Google Maps). This section requires that Google Maps API
  javascript library be loaded.
  
  When the location is found in Google Maps, copy and paste this code into the location bar of the
  browser and press enter to get latitude and longitude:
  
  javascript:void(prompt('',gApplication.getMap().getCenter()));
  
  Created on 2008-10-17.
  $Id: resto_map.html 269 2008-11-07 18:04:32Z heavyzheng $
-->
{% endcomment %}

<div id="resto_map" class="section">

  {% if error %}
    <div class="error message">
      {{ error }}
      <a href="javascript:void(0);" onclick="closeMessage('#resto_map')">[close]</a>
    </div>
  {% endif %}
  
  {% if resto.has_geo_location %}
  
    <div id="map_canvas_{{ map_canvas_id }}" class="map_canvas"></div>
    
    <script type="text/javascript">//<![CDATA[
    function initRestoMap() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map_canvas_{{ map_canvas_id }}"));
            map.addControl(new GSmallMapControl());
            map.setCenter(new GLatLng({{ resto.latitude }}, {{ resto.longitude }}), 15);
            var point = new GLatLng({{ resto.latitude }}, {{ resto.longitude }});
            var marker = new GMarker(point);
            GEvent.addListener( marker, "click", function() {
                var markerInfo = "{{ resto.name }} @({{ resto.latitude }}, {{ resto.longitude }})";
                marker.openInfoWindowHtml(markerInfo);
            } );
            map.addOverlay(marker);
        }
    }
    //]]></script>
    
    <!-- TODO: how to call this function after refresh? div's onload callback? -->
    <script>//<![CDATA[
      initRestoMap();
    //]]></script>
  
  {% else %}
  
    <div><i>This resto has no Geo location.</i></div>
  
  {% endif %}
  
  {% if editable %}
    {% if resto.is_current_user_editor or is_admin %}
    
      <div class="form-toggle">
        <a href="javascript:void(0);" onclick="showEditForm('#resto_map')">[edit]</a>
      </div><!--/.form-toggle-->
    
      <form class="edit-form hidden" action="." method="POST">
        <input type="hidden" name="section" value="resto_map"/>
        Latitude:  <input type="text" size="20" name="latitude"  value="{{  resto.latitude|default:"" }}"/>
        Longitude: <input type="text" size="20" name="longitude" value="{{ resto.longitude|default:"" }}"/>
        <br/>
        <input type="button" value="Update" onclick="submitEditForm('#resto_map');"/>
        <input type="button" value="Cancel" onclick="hideEditForm('#resto_map');"/>
      </form><!--/.edit-form-->
      
      <div class="submitting hidden">
        <img src="/static/fnr/images/waiting.gif" alt="Submitting"/>
        Submitting your request... Please wait...
      </div><!--/.submitting-->
    
    {% endif %}
  {% endif %}

</div><!--/#resto_map-->



